//
// General
// --------------------------------------------------

// Classes ====================================================================

.clearfloats:extend(.clearfix all) {}

.centered {
  .text-center;

  // Fix because of Bootstrap setting a text-align: left on th
  th {
    .text-center;
  }
}

// Tables =====================================================================

table:extend(.table all) {}

table {
  // Used by: Livetable 
  table {
    background-color: @xwiki-page-content-bg;
  }
  th {
    label {
      font-weight: normal;
      margin: 0;
    }
  }
}

// Rendering ==================================================================

/* Non-exiting links */
.wikicreatelink,
[contenteditable="true"] a[data-linktype="create"] {
  text-decoration: underline;
}

/* Mark with a rounded question mark */
.wikicreatelink a:after,
[contenteditable="true"] a[data-linktype="create"]:after {
  background-color: @link-color;
  border-radius: @border-radius-large;
  color: @xwiki-page-content-bg;
  content: "?";
  display: inline-block;
  font-size: 80%;
  margin-left: 4px;
  padding: 0 4px;
  text-decoration: none;
}

/* Differentiate external link from internal link using an icon */
.wikiexternallink,
[contenteditable="true"] a[data-linktype="external"] {
  background: url(@xwiki-icon-link-external) no-repeat scroll right center transparent;
  padding-right: 12px;
}

.wikimodel-emptyline {
  height: 1em;
}

// Code =======================================================================

pre {
  /* Resetting values from bootstrap/code.less and bootstrap/normalize.less, 
  * since 'pre' are generated by our syntax in verbatim blocks. */
  background-color: inherit;
  border: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.code, .code pre, .code *, .monospace, pre  {
  font-family: @font-family-monospace;
  white-space: pre;
}

.monospace {
  /* Don't use 'pre' because we want the text to wrap for inline styling. */
  white-space: pre-wrap;
}

// Line numbers in code

.linenoswrapper {
  display: flex;
  flex-direction: row;

  .linenos {
    text-align: right;
    color: lighten(@text-color, 50%);
    margin-right: 1em;
    user-select: none;

    + div {
      flex-grow: 1;
    }
  }
}

// Responsive Images ==========================================================

img {
  max-width: 100%;
  height: auto;
}

// Hyphenation ================================================================

.hyphenate {
  // We don't use Bootstrap's .hyphens class because it doesn't work in Chrome.
  // See XWIKI-17770: Horizontal scroll of Livetable when page name is too long on Chrome
  // We use instead the solution described at
  // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

  // These are technically the same, but use both.
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  // This is the dangerous one in WebKit, as it breaks things wherever.
  word-break: break-all;
  // Instead use this non-standard one:
  word-break: break-word;

  // Adds a hyphen where the word breaks, if supported (No Blink).
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

// User preferences ===========================================================
body {
  /* We apply various user preference related styles to the content of the page.
   We use classes that are added to the body itself in htmlheader.vm */
  // Link underlining preference
  &.preference-underlining-yes {
    a {
      text-decoration: underline;
    }
  }

  &.preference-underlining-only-inline-links {
    // Define an inline link mixin
    .inline-link {
      text-decoration: underline;
    }
    .not-inline-link {
      text-decoration: none;
      // Make sure we don't take over the default behaviour on hover with too much specificity.
      &:hover, &:focus {
        text-decoration: underline;
      }
    }

    // Main rule for the content
    #xwikicontent a {
      .inline-link();
    }

    // UIs where we want to underline outside of content.
    .xdocLastModification, // Under the title, this link is inline so we want to underline it.
    .xdocCreation, // In the document footer, this link is inline, similarly to last modification.
    .panel[class*="HelpTipsPanel "], // This panel, unlike other panels, contains mostly text with underline links.
    .commentauthor, #commentform > label, // Similarly to the page last modificator, we want to underline comment authors
    .xHint // Form input hints, covered even outside of regular page content.
    {
      & a {
        .inline-link();
      }
    }

    /* UIs in content where we want to not underline by default.
      Those elements usually contain only links that are not inline (and a lot of links). */
    #xwikicontent {
      & .xwiki-livetable-container, // Do not underline links in livetables
      & .xtree, // Do not underline links in livetables
      & .xwikitabbar, // Do not underline links in the tab bar. An example of this is the one containing document metadata at the bottom of ny doc.
      & .buttonwrapper, // Do not underline links that are inside buttonwrapper. Those will be styled like buttons and we want to keep their style consistent with buttons.
      & .vertical-menu, // In vertical menus (user menu, syntax guide, ...), do not underline the menu items.
      & .jstree-xwiki, // Do not underline links in jstrees
      & .xwiki-livedata .cell .displayer-link, // Do not underline links that are in their own livedata cell
      & .xwiki-livedata .cell .breadcrumb // Do not underline links that are in breadcrumbs in livedatas
      {
        & a {
          .not-inline-link();
        }
      }

      a {
        &.user-name, &.group-name // Usually user names and group names displayed with the userDisplayMacro
          // are next to the user avatar. This specific rule can be removed once XWIKI-22269 is fixed.
        {
          .not-inline-link();
        }
      }

      /* Remove the underlining from links styled like buttons.
       Those are already different enough from their neighboring text. */
      & a.btn,
      & a.button,
      & .buttonwrapper a {
        .not-inline-link();
      }

      /* Remove the underlining from links with an image or an icon.
        In the vast majority of cases, these links are already easy to find.
       */
      & a:has(img), // With an image or an icon from the Silk iconTheme
      & a:has(span.fa) { // With an icon from the Font Awesome iconTheme
        .not-inline-link();
      }
    }

    // Helper classes for easier content customization. Note that those only work for this preference.
    // This class can either be used on a common parent or the links themselves.
    #xwikicontent .force-no-underline a,
    #xwikicontent a.force-no-underline {
      text-decoration: none;
    }

    .force-underline a,
    a.force-underline {
      text-decoration: underline;
    }
  }

  &.preference-underlining-no {
    a {
      text-decoration: none;
    }
  }
}